<template>
     <div class="order">
        <HeaderTop title="订单"></HeaderTop>
        <div class="order_no_login">
            <img src="./images/person.png" alt="">
            <h3>登录后查看外卖订单</h3>
            <button>立即登录</button>
        </div>
    </div>
</template>

<script>
import HeaderTop from '../../components/HeaderTop/HeaderTop.vue'
export default {
    components:{
        HeaderTop
    }
}
</script>

<style lang="less">
    .order{
        width: 100%;

        .order_no_login{
            width: 60%;
            margin: 0 auto;
            text-align: center;
            padding-top: 140px;
            img{
              
                width: 100%;
                // left: 50%;
                // transform: translateX(50%);
                display: block;
                height: 30%;
            }
            h3{
                text-align: center;
                color: gray;
            }
            button{
                // margin: 0 auto;
                padding: 10px 20px;
                border-radius: 5px;
                outline: none;
                border: 0;
                background: #02a774;
                color: #fff;
                font-size: 14px;
                margin-top: 10px;
            }
        }
    }
</style>